<template>
	<div class="single_group" :class="showmargin">
		<div class="is_selected"></div>
		<div class="single_group_left" :class="classimg"></div>
		<div class="single_group_content">
			<div class="fflex">
				<div v-if="typeTitle" class="single_group_contentt">{{typeTitle}}</div>
				<div class="bflex"></div>
				<div v-if="typePrice" class="single_group_right">{{typePrice}}元</div>
			</div>

			<div v-if="typeContent" class="single_group_contentb">{{typeContent}}</div>
		</div>
	
	</div>
</template>

<script>
	export default {
        data () {
            return {}
        },
      props:['typeTitle','typeContent','typePrice' ,'classimg','showmargin'],
    }
</script>

<style scoped>
	.fflex{
		height: 20px;
		line-height: 20px;
		display: flex;
	}
	.bflex{
		flex: 1;
	}
	.is_selected{
		height: 16px;
		width: 16px;
		position: absolute;
		top: 35px;
		left: 20px;
		background: url(../../assets/img/reference/no_select.png) no-repeat center;
		background-size: 16px;
	}
	.select_page .is_selected{
		top: 13px;	
	}
	.select_special .is_selected{
		top: 23px;
	}
	.weui-media-box_appmsg .weui-media-box__thumb {
	    width: 50%;
	    max-height: 50%;
	    vertical-align: middle;
	}
	.weui-media-box:before {
		border-top: 1px solid red !important;
	}
	.weui-media-box{
		padding: 0 !important;
	}
	.single_group{
		width: 100%;
		display: flex;
	}
	.single_group_left{
		flex: 0 0 42px;
		height: 40px;
		background: url(../../assets/img/reference/schoolong.png) no-repeat center;
		background-size: 31px 24px;
	}
	.single_group_content{
		margin-left: 16px;
	}
	.select_page .single_group_content{
		margin-left: 10px;
	}
	.single_group_contentt{
		flex: 0 0 auto;
		font-weight: 500;
	}

	.single_group_content{
		flex: 1;
		font-size: 1.6rem;
		color: #F89721;
	}
	.single_group_contentb{
		margin-top: 3px;
		line-height: 16px;
		font-size: 1.2rem;
		color: #a6a6a6;
		margin-bottom: 2px;
	}
	.single_group_right{
		flex: 0 0 auto;
		line-height: 20px;
		font-size: 1.6rem;
		color: #EE7316;
	}
	
	.job{
		margin-top: 8px;
		background: url(../../assets/img/reference/job.png) no-repeat center;
		background-size: 27px 26px;
	}
	.security{
		background: url(../../assets/img/reference/security.png) no-repeat center;
		background-size: 25px 30px;
	}
	.business{
		margin-top: 8px;
		background: url(../../assets/img/reference/business.png) no-repeat center;
		background-size: 25px 30px;
	}
	.executed{
		background: url(../../assets/img/reference/executed.png) no-repeat center;
		background-size: 28px 24px;
	}
	.black_name{
		background: url(../../assets/img/reference/black_name.png) no-repeat center;
		background-size: 28px 28px;
	}
	.showmargin{
		margin-bottom: 19px;
	}
	/*选中效果*/
	.item-selected .single_group_content{
		color: #ffffff;
	}
	.item-selected .single_group_contentb{
		color: #ffffff;
	}

	.item-selected .single_group_right{
		color: #FFFFFF;
	}
	.item-selected .single_group_left{
		background: url(../../assets/img/reference/sschoolong.png) no-repeat center;
		background-size: 31px 24px;
	}
	.item-selected .job{
		margin-top: 8px;
		background: url(../../assets/img/reference/sjob.png) no-repeat center;
		background-size: 27px 26px;
	}
	.item-selected .security{
		background: url(../../assets/img/reference/ssecurity.png) no-repeat center;
		background-size: 25px 30px;
	}
	.item-selected .business{
		margin-top: 8px;
		background: url(../../assets/img/reference/sbusiness.png) no-repeat center;
		background-size: 25px 30px;
	}
	.item-selected .executed{
		background: url(../../assets/img/reference/sexecuted.png) no-repeat center;
		background-size: 28px 24px;
	}
	.item-selected .black_name{
		background: url(../../assets/img/reference/sblack_name.png) no-repeat center;
		background-size: 28px 28px;
	}
	
	.item-selected .is_selected{
		background: url(../../assets/img/reference/selected.png) no-repeat center;
		background-size: 16px;
	}
	/*样式重构*/

</style>